<template>
    <div class="water-monitoring">
        <el-table
            :data="tableData"
            :header-row-style="{ background: '#f2f2f2' }"
            id="table"
            height="355px"
            border
            style="width: 100%;"
            size="small">
            <el-table-column
                v-for="item in tableHeaderColumn"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :show-overflow-tooltip="true">
            </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next, total"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'water-monitoring',
    props: {
        
    },

    created() {
        
    },

    data() {
        return {
            date: '',
            tableHeaderColumn: [
                { label: '行政区', prop: 'address' },
                { label: '取水用户名', prop: 'name'},
                { label: '今日取水量（万m³）', prop: 'todayWater' },
                { label: '本月取水量（万m³）', prop: 'monthWater'},
                { label: '本年取水量（万m³）', prop: 'yearWater'}
            ],
            tableData: [
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 },
                {todayWater: '1000', monthWater: '300', name: '天津站', address: '天津市天津站', yearWater: 123 }
            ],
            
        };
    },

    methods: {
        
    }
};
</script>

<style lang="scss" scoped>
    .water-monitoring {
        background: #fff;
        padding: 15px 15px 0px;
        box-sizing: border-box;
        :deep {
            .el-table thead tr th {
                background: #f0f0f0;
            }

            .el-table thead{
                color: rgba(0, 0, 0, 0.65);
                font-size: 12px;     
            }

        }
    }

    .el-pagination {
        display: flex;
        // justify-content: center;
        margin-top: 10px;
        :deep {
            button {
                background: rgba(0, 0, 0, 0);
            }
            .btn-prev, .btn-next {
                background: rgba(0, 0, 0, 0);
                color: #02A7F0;
            }
            .el-pager li {
                background: rgba(0, 0, 0, 0);
                color: #333;
                font-size: 12px;
            }
            .el-pager li.active {
                color: #1890ff;
            }
            .el-pager li:hover {
                color: #1890ff;
            }

            button:disabled {
                color: #c0c4cc;
            }
            
        }
    }

    
</style>